import { ref, reactive, onMounted } from 'vue'
import axios from 'axios'

export default function () {
  let disabled = ref(false)
  let dogList = reactive([
    'https://images.dog.ceo/breeds/pembroke/n02113023_1373.jpg'
  ])

  onMounted(() => {
    addLog()
  })

  async function addLog() {
    try {
      disabled.value = true
      const result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      dogList.push(result.data.message)
      disabled.value = false
    } catch (error) {
      alert(error)
    }
  }
  return {
    dogList,
    disabled,
    addLog,
  }
}